import React from 'react';
import { observer } from 'mobx-react';
import { Row, Col, message, Modal } from 'antd';
import { WeaLocaleProvider, WeaSelect, WeaNewScroll, WeaTextarea, WeaHelpfulTip, WeaError, WeaInput } from 'ecCom';
import $ from "jquery";
import _ from "lodash";
const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

@observer
export default class ConditionSet extends React.Component {
    componentWillMount() {
        const { store } = this.props;
        store.changeContentHeight();
    }


    render() {
        const { store } = this.props;
        const dialogHeight = 616;
        const { conditionInfo, fieldRecord, relationtypeOptions, relation, root, ruleSql, isShowSql, contentHeight, targetValue, valuetype, targetValueOptions, selectedItemKey, tableOptions } = store;
        const { conditiontype, conditionsql2, fieldOptions } = conditionInfo;
        let targetFieldid = "";
        if (fieldRecord && fieldRecord.key) {
            targetFieldid = fieldRecord.key + "";
        }
        const conditiontypeOptions = [{
            key: "1",
            showname: getLabel(2086, "普通") + getLabel(33234, "类型")
        }, {
            key: "2",
            showname: 'sql'
        }];

        const valuetypeOptions = [{
            key: "1",
            showname: getLabel('507869', '普通变量')
        }, {
            key: "2",
            showname: getLabel('507870', '关联表格')
        }];
        const { key } = fieldRecord;
        let sql = getLabel(84304, "暂无");
        if (ruleSql != "") {
            sql = ruleSql;
        }
        return (
            <div className="wev-edc-condition-warp">
                <div className="wev-edc-condition-top" >
                    <Row>
                        <Col span={6} style={{ width: 170 }}>
                            <div className="wev-edc-field-label">
                                {getLabel(23243, "条件类型")}
                            </div>
                            <div className="wev-edc-field">
                                <WeaSelect
                                    key={conditiontype}
                                    value={conditiontype}
                                    options={conditiontypeOptions}
                                    style={{ width: 100 }}
                                    viewAttr={3}
                                    onChange={(v) => store.changeFieldValue('conditiontype', v)}
                                />
                            </div>
                        </Col>
                        {conditiontype && conditiontype == "1" &&
                            <Col span={6} style={{ width: 240 }}>
                                <div className="wev-edc-field-label">
                                    {getLabel(15620, "目标字段")}
                                </div>
                                <div className="wev-edc-field">
                                    <WeaError tipPosition='bottom' error={'"' + getLabel(15620, "目标字段") + '"' + getLabel(21423, "未填写")}
                                        style={{ width: "100%" }}
                                        ref={ref => { store.refObj["mbzd"] = ref; }}
                                    >
                                        <WeaSelect
                                            showSearch
                                            filterOption={(inputValue, option) => store.selectFilterOption(inputValue, option)}
                                            options={fieldOptions.slice()}
                                            style={{ width: 160 }}
                                            value={targetFieldid}
                                            viewAttr={3}
                                            onChange={(v) => store.changeFieldValue('targetFieldid', v)}
                                        />
                                    </WeaError>
                                </div>
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" &&
                            <Col span={6} style={{ width: 110 }}>
                                {key &&
                                    <WeaSelect
                                        key={relationtypeOptions.length}
                                        value={relation}
                                        options={relationtypeOptions.slice()}
                                        style={{ width: 95 }}
                                        viewAttr={2}
                                        onChange={(v) => store.changeFieldValue('relation', v)}
                                    />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" &&
                            <Col span={6} style={{ width: 120 }}>
                                {key && <WeaSelect
                                    value={valuetype}
                                    options={valuetypeOptions}
                                    style={{ width: 105 }}
                                    viewAttr={3}
                                    onChange={(v) => store.changeFieldValue('valuetype', v)}
                                />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "1" &&
                            <Col span={6} style={{ width: 150 }}>
                                {key &&
                                    <WeaError tipPosition='bottom' error={'"' + getLabel(15620, "目标字段") + '"' + getLabel(21423, "未填写")}
                                        style={{ width: 150 }}
                                        ref={ref => { store.refObj["mbzd_"] = ref; }}
                                    >
                                        <WeaInput value={targetValue} viewAttr={3} onChange={value => { store.changeFieldValue("targetFieldid_", value) }} style={{ width: 150 }} />
                                    </WeaError>
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "1" &&
                            <Col span={6} style={{ width: 16, marginLeft: '20px', verticalAlign: 'top', display: 'inline-block', lineHeight: '33px' }}>
                                {key &&
                                    <WeaHelpfulTip width={300} title={
                                        <div >
                                            <p>{getLabel(129805, '提示：配置变量可输入动态参数为：')}</p>
                                            <p>{getLabel(82351, "1.输入$taskid$表示当前任务")}</p>
                                            <p>{getLabel(82351, "2.输入$nodeid$表示当前任务节点")}</p>
                                            <p>{getLabel(82352, "3.输入$userid$表示当前操作者")}</p>
                                            <p>{getLabel(82352, "4.输入$departmentid$表示当前操作者部门")}</p>
                                            <p>{getLabel(82352, "5.输入$subcompanyid$表示当前操作者分部")}</p>
                                            <p>{getLabel(387192, "6.输入$workcode$表示当前操作者工号")}</p>
                                        </div>} />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "2" &&
                            <Col span={6} style={{ width: 150 }}>
                                {key &&
                                    <WeaError tipPosition='bottom' error={'"' + getLabel(15620, "目标字段") + '"' + getLabel(21423, "未填写")}
                                        style={{ width: 150 }}
                                        ref={ref => { store.refObj["mbzd_"] = ref; }}
                                    >
                                        <WeaSelect
                                            showSearch
                                            value={targetValue}
                                            options={targetValueOptions.slice()}
                                            style={{ width: 150 }}
                                            viewAttr={3}
                                            onChange={(v) => store.changeFieldValue('targetValue', v)}
                                        />
                                    </WeaError>
                                }
                            </Col>
                        }
                    </Row>
                </div>
                {conditiontype && conditiontype == "1" &&
                    <div>
                        <div className="wev-edc-condition-button">
                            <div className="btns">
                                <div onClick={() => store.addParam(this)} title={getLabel(611, "添加")} className="btn-icon add"></div>
                                <div onClick={() => { store.delParam() }} title={getLabel(23777, "删除")} className="btn-icon del"></div>
                                <div onClick={() => store.addbracket(0)} title={getLabel(24542, "添加或条件")} className="btn-icon joinor"></div>
                                <div onClick={() => store.addbracket(1)} title={getLabel(24541, "添加与条件")} className="btn-icon joinand"></div>
                                <div onClick={() => { store.splitCondition() }} title={getLabel(33576, "拆分条件")} className="btn-icon spit"></div>
                            </div>
                        </div>
                        <WeaNewScroll ref="contentScroll" height={250} >
                            <div className="wev-edc-condition-content">
                                <div id="ruleContent"  >
                                    <div id="expressionBlock">
                                        {store.getRelationItems(root, true)}
                                    </div>
                                </div>
                            </div>
                        </WeaNewScroll>
                        <div id="ruleSQL" className={isShowSql ? "" : "hide"}>
                            <WeaNewScroll height={60} >
                                {sql}
                            </WeaNewScroll>
                        </div>
                        <div id="ruledescBtn" onClick={() => store.changeShowSql()} className={"operbtn " + (isShowSql ? "operbtn_down" : "operbtn_up")}></div>
                    </div>
                }
                {conditiontype && conditiontype == "2" &&
                    <WeaNewScroll key={sql.length} height={250} >
                        <div className="wev-edc-condition-sql">
                            <Row>

                                <Col span={20}>
                                    <div className="sqlArea">
                                        <WeaError tipPosition='bottom' error={"sql" + '"' + getLabel(21423, "未填写")}
                                            style={{ width: "100%" }}
                                            ref={ref => { store.refObj["sql_"] = ref; }}
                                        >
                                            <WeaTextarea
                                                minRows={10}
                                                value={conditionsql2}
                                                viewAttr={3}
                                                onChange={(v) => store.changeFieldValue('conditionsql2', v)}
                                            />
                                        </WeaError>
                                    </div>
                                    <div className="sqlDesc">
                                        {getLabel(128096, "格式为：table1.a='1' and table2.b='2'，其中table1,table2为数据库表名 a,b为字段名")}
                                        <br />
                                        {getLabel('507872', '数据源中表为：') + tableOptions.join(",")}
                                        <div style={{ width: 215, marginLeft: '18px', verticalAlign: 'top', display: 'inline-block', lineHeight: '22px' }}>
                                            <WeaHelpfulTip width={300} title={
                                                <div >
                                                    <p>{getLabel(129805, '提示：配置变量可输入动态参数为：')}</p>
                                                    <p>{getLabel(82351, "1.输入$taskid$表示当前任务")}</p>
                                                    <p>{getLabel(82351, "2.输入$nodeid$表示当前任务节点")}</p>
                                                    <p>{getLabel(82352, "3.输入$userid$表示当前操作者")}</p>
                                                    <p>{getLabel(82352, "4.输入$departmentid$表示当前操作者部门")}</p>
                                                    <p>{getLabel(82352, "5.输入$subcompanyid$表示当前操作者分部")}</p>
                                                    <p>{getLabel(387192, "6.输入$workcode$表示当前操作者工号")}</p>
                                                </div>} />
                                        </div>
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    </WeaNewScroll>
                }
            </div>
        )
    }
}

